<template>
  <el-card class="app-full" :body-style="{padding: '10px'}">
    <div slot="header" class="clearfix">
      <el-form :inline="true" class="demo-form-inline" :size="size">
        <el-form-item label="用户">
          <el-input placeholder="用户"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="text item">
      <el-page
        :page="page"
        :op="true"
        :template="template"
        :size="size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :buttons="buttons"
        @buttonClick="buttonClick"
      />
    </div>
  </el-card>
</template>

<script>
import elPage from "@/components/el-page/el-page.vue";
export default {
  components: { elPage },
  data() {
    return {
      page: {},
      size: "mini",
      template: {},
      buttons: [
        {
          type: "toInfo",
          icon: "search"
        },
        {
          type: "toEdit",
          icon: "edit"
        },
        {
          type: "del",
          icon: "trash"
        }
      ]
    };
  },
  created() {
    var that = this;
    import("./user.model.page.json").then(function(data) {
      that.template = data.default;
    });
    this.getAll();
  },
  methods: {
    getAll() {
      this.$http({
        url: "/uaa/api/users",
        method: "GET"
      }).then(resp => {
        this.page = resp.data;
      });
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    buttonClick(type, row) {
      console.debug("点击了：", type, row);
      if (type == "del") {
        this.$confirm("确认删除用户:" + row.name, "警告", {});
      }
    },
    onSubmit() {}
  }
};
</script>